<template>
  <div class="time">
      <div class="month" @click="datahang" :class="isCollapse === true? 'lc':''">月份</div>
      <div class="data" :class="isCollapse === true? '':'lc'"  @click="datahang">日期</div>
                <div class="block">
                  <el-date-picker
                 v-if="isCollapse"
                  v-model="value2"
                  type="data"
                  placeholder="2022-10"
                  />
                  <div class="demo-data-picker" v-else>
                  <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="2015-10-02"
                  end-placeholder="2015-10-10"
                  :size="size"
                />
                </div>
               </div>
               <el-select v-model="value" class="m-2" placeholder="地区">
                   <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                   />
                 </el-select>
                 <input type="text">
               <el-button type="primary" class="answer">查询</el-button>
     </div>
      <!-- 教师月消息发布排行 -->
  <div class="list" >
    <!-- 数据表格
       ：data属性决定最终表格渲染出来的行数
    -->
                  <el-table :data="tableData" stripe style="width: 540px">
                 <el-table-column prop="sort" label="排名" width="180" />
                 <el-table-column prop="teacher" label="姓名" width="180" />
                 <el-table-column prop="count" label="累计发布数量消息" />
                 </el-table>

  
  </div>


</template>

<script setup>  

import { backtopEmits } from "element-plus"

  var isCollapse = ref(false)
  var datahang =()=>{
    isCollapse.value = !isCollapse.value
   
  }
  //a,导入接口
  import server from '@/api/index'
  var tableData = ref()
  
  import { onMounted, ref } from 'vue'; 
 //消息发布列表
 onMounted(async()=>{
  //教师月消息发布排行
  var res6 =  await server.xiaoxitongji.messageStatistics_teachermsgnum()
 tableData.value = res6.data.data 
   
 })
  
 



 
 


</script>

<style scoped>
 .time{
  display: flex;
}
.time .block{
    margin-right: 20px;
  }
  .time .month{
    width: 80px;
    height: 30px;
    border: 1px solid #a6a2a2;
    border-radius: 5px;
  }
   .time .data{
    width: 80px;
    height: 30px;
    border: 1px solid #a6a2a2;
    border-radius: 5px;
    }
    .time .block{
      margin-left: 15px;
    }
    .time .answer{
      color: white;
  
    }
    .active{
      background-color: red;
    }
 
   .lc{
    background-color: #239ffe;
    color: white;
   }
   .m-2{
    width: 100px;
   }
   input{
    margin-left: 15px;
   }
  .list{
    margin-top: 20px;
  
  }
</style>